<template>
	<view class="apps">
		<view class="banner">
			<image :src="info.image_url" style="width: 100%;height: auto;" mode="widthFix"></image>
		</view>
		<view class="info">
			<view class="title">{{info.title}}</view>
			<view class="time">
				<uv-icon name="clock-fill" size="18"></uv-icon>
				<view style="margin-left: 10rpx;">{{info.start_time}} 至 {{info.end_time}}</view>
			</view>
			<view class="time">
				<uv-icon name="map-fill" size="20" ></uv-icon>
				<view style="margin-left: 10rpx;display: flex; overflow: hidden;text-overflow: ellipsis;
		display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;">{{info.city_text}}{{info.address}}</view>
			</view>
			<view class="time" v-if="info.nums>0">
				<uv-icon name="account-fill" size="21"></uv-icon>
				<view style="margin-left: 10rpx;">已报名人数: {{info.nums}}</view>
			</view>
		</view>
		<view class="content">
			<uv-parse :content="info.content" :tagStyle="style"></uv-parse>
		</view>
		<uv-popup ref="popupRef" :close-on-click-overlay="false" customStyle="border-radius:15rpx; min-height:200rpx;">
			<view style="width: 600rpx; min-height: 200rpx; background-color: #fff; padding:20rpx;">
				<view style="text-align: center; padding: 10rpx; font-size: 14px;">我要报名</view>
				<uv-form :model="form" :rules="rules" ref="formRef">
					<uv-form-item label="姓名" prop="name">
						<uv-input v-model="form.name" placeholder="请输入姓名" />
					</uv-form-item>
					<uv-form-item label="电话" prop="mobile">
						<uv-input v-model="form.mobile" placeholder="请输入电话" />
					</uv-form-item>
					<uv-form-item label="公司" prop="company">
						<uv-input v-model="form.company" placeholder="请输入公司" />
					</uv-form-item>
					<uv-form-item label="职务" prop="job">
						<uv-input v-model="form.job" placeholder="请输入职务" />
					</uv-form-item>	
					</uv-form>
					<view style="padding:10rpx;"><uv-button type="primary" @click="submit">提交</uv-button></view>
					<view style="padding:10rpx;"><uv-button type="error" @click="close">取消</uv-button></view>
			</view>
		</uv-popup>
		<uv-tabbar value="4">
			<view class="tabitem blue2" @click="handle('/pages/special/qrcode?id='+info.id)">
				分享朋友
			</view>
			<view class="tabitem blue" v-if="info.process > 0" @click="baoming()">
				我要报名
			</view>
			<view class="tabitem red" v-else>
				已结束
			</view>
		</uv-tabbar>
	</view>
</template>

<script setup>
	import { util } from '/common/util.js';
	import { ref , reactive,nextTick  } from 'vue';
	import { onLoad,onShow } from '@dcloudio/uni-app'
	const info = ref([]),formRef = ref(null),popupRef=ref(null),
		form=ref({
			name:'',
			mobile:'',
			company:'',
			job:'',
		}),
		rules=ref({
			name:{
				type: 'string',
				required: true,
				message: '请填写姓名',
				trigger: ['blur', 'change']
			},
			mobile: [{
				required: true,
				message: '请填写手机号',
				// blur和change事件触发检验
				trigger: ['blur', 'change']
			}, {
				
				pattern:/^1([3589]\d|4[5-9]|6[1-2,4-7]|7[0-8])\d{8}$/,
				message: '手机号码错误',
				trigger: ['blur', 'change']
			}]
		}),
		style = ref({
			p:"font-size:15px;",
			img:"max-width:100%"
		}),
		id=ref(0)
		const getDetail = ()=>{
			util.request({url:"/special/detail",data:{id:id.value},type:'get'}).then((rlt)=>{
				info.value = rlt.data;
			})
			
		},reset = () => {
			formRef.value.resetFields();
			formRef.value.clearValidate();
		},
		baoming = () => {
			popupRef.vlaue.open();
		},
		close = () => {
			popupRef.value.close();
		},
		submit= ()=>{
			formRef.value.validate().then((rlt)=>{
				util.request({url:"/special/submit",data:{activity_id:id.value,...form.value}}).then((rlt)=>{
					if(rlt.code == 1){
						form.value = {
							name:'',
							mobile:'',
							company:'',
							job:'',
						}
						getDetail();
						app.close();
						app.reset();
						app.util.alert('报名成功');
					}
				})
			}).catch(errors => {
				console.log(errors);
			})
		},
		handle = (e)=>{
			uni.navigateTo({
				url:e,
			})
		}
		onLoad((opt)=>{
			id.value = opt.id
			getDetail()
		})
</script>

<style scoped>
	.banner{width:100%;height: 450rpx;overflow: hidden;}
	.info {margin:10rpx 20rpx; padding:15rpx;background-color: #f9f9f9; display: flex; flex-direction: column; border-radius: 5rpx;}
	.info .title{font-size: 32rpx; display: flex; overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		/* 控制行数 */
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;}
	.info .time{font-size: 28rpx; display: flex; align-items: center;margin-top: 15rpx;}
	.content{padding:20rpx;margin-bottom: 20px;}
	.company{padding:30rpx; border-radius: 20rpx; border:1px dashed #f9f9f9; }
	.tabitem{display: flex; flex:1;align-items: center; justify-content: center; font-size: 28rpx;color:#fff;font-weight: 400;}
	.blue{background-color:#4f83fe}
	.blue2{background-color: #5cc3f6;}
	.red{background-color: #ec4a2f;}
</style>
